<?php include 'layouts/_header.view.php'; ?>

<style>
    #main {
        margin: 0 auto;
        width: 700px;
    }
</style>

<main id="main">
    <?php include VIEW_PATH . 'layouts/_navbar.view.php'; ?>

    <hr>

    <h1>颜色</h1>

    <span class="dark">主色(深色)</span>
    <span class="light">浅色</span>
    <span class="gray">灰色(主色灰)</span>
    <span class="blue">蓝色</span>
    <span class="red">红色</span>
    <span class="orange">橘色</span>
    <span class="green">绿色</span>
    <span class="grey">灰色(边框灰)</span>
    <span class="white">白色</span>
    <p>
        <a href class="dark">文字链接默认主色</a>
    </p>


    <hr>

    <h1>按钮</h1>

    <h3>原生表单按钮</h3>
    <button class="ui-button">注册</button>
    <button class="ui-button" data-type="danger">删除</button>


    <h3>a标签按钮</h3>
    <a href="javascript:" class="ui-button" role="button">a标签按钮</a>
    <a href="javascript:" class="ui-button" role="button" data-type="primary">蓝色</a>
    <a href="javascript:" class="ui-button" role="button" data-type="success">绿色</a>
    <a href="javascript:" class="ui-button" role="button" data-type="warning">橙色</a>
    <a href="javascript:" class="ui-button" role="button" data-type="danger">红色</a>

    <h3>禁用按钮</h3>
    <button class="ui-button" disabled>button按钮禁用</button>


    <h3>loading状态</h3>
    <button class="ui-button loading">button标签</button>
    <button class="ui-button loading" data-type="primary">button标签</button>


    <h3>label标签按钮</h3>
    <input id="someId" type="submit">
    <label class="ui-button" for="someId" data-type="primary" role="button">关联的label标签按钮</label>


    <h3>其他标签按钮</h3>
    <span class="ui-button" role="button" tabindex="0">span标签</span>
    <p>
    <div class="ui-button" role="button" tabindex="0" data-type="primary">div标签</div>
    </p>


    <p id="testLoading">
        <a href="javascript:" class="ui-button" role="button">点击loading绽放</a>
        <a href="javascript:" class="ui-button ui-button-primary" role="button">点击loading绽放</a>
        <a href="javascript:" class="ui-button ui-button-success">点击loading绽放</a>
        <a href="javascript:" class="ui-button ui-button-warning">点击loading绽放</a>
    </p>


    <hr>


    <h1>input 输入框</h1>


    <h3>普通输入框</h3>
    <p>
        <input class="ui-input" placeholder="最简单的input标签">
    </p>
    <p>
        <span class="ui-input"><input placeholder="input内置-内联标签"></span>
    </p>
    <p>
    <div class="ui-input"><input placeholder="宽度100%自适应父容器"></div>
    </p>
    <p>
        <input class="ui-input" value="只读" readonly>
        <input class="ui-input" value="禁用" disabled>
    </p>
    <p>
        <input class="ui-input error" placeholder="文本框出错" required>
        <span class="ui-input"><input class="error" placeholder="文本框出错" required></span>
    </p>

    <div class="ui-input-x">
        <input id="someId" maxlength="20" placeholder="带计数的文本框">
        <div class="ui-input"></div>
        <label for="someId" class="ui-input-count">
            <span>0</span>/<span>20</span>
        </label>
    </div>


    <hr>
    <h1>搜索框</h1>



    <p>
        <input type="search" class="ui-input" placeholder="普通搜索框">
    </p>
    <p>
        <span class="ui-input ui-input-search">
            <input type="search" placeholder="内联搜索框">
            <a href="javascript:" class="ui-icon-search">搜索</a>
        </span>
    </p>
    <p>
        <span class="ui-input ui-input-search" align="right">
            <input type="search" placeholder="测试">
            <button class="ui-icon-search">搜索</button>
        </span>
    </p>
    <p>
        <span class="ui-input ui-input-search" align="right">
            <input type="search" class="error">
            <input type="submit" class="ui-icon-search" value="搜索">
        </span>
    </p>


    <hr>
    <h1>静态控件之文本域</h1>

    <p>
        <textarea class="ui-textarea">最基本HTML</textarea>
    </p>


    <div class="ui-textarea">
        <textarea rows="8">textarea内置-块状-100%父级宽度：</textarea>
    </div>

    <p>
        <textarea class="ui-textarea" resize="both">两个方向拉伸</textarea>
        <textarea class="ui-textarea" resize="vertical">仅垂直方向拉伸</textarea>
        <textarea class="ui-textarea" resize="horizontal">仅水平方向拉伸</textarea>
    </p>

    <p>
        <textarea class="ui-textarea" readonly>只读</textarea>
        <textarea class="ui-textarea" disabled>禁用</textarea>
        <textarea class="ui-textarea error">错误</textarea>
    </p>

    <div class="ui-textarea-x" style="max-width:500px;">
        <textarea id="someId" maxlength="250" rows="5">带计数的文本域</textarea>
        <div class="ui-textarea"></div>
        <label for="forFocusable" class="ui-textarea-count">
            <span>0</span>/<span>250</span>
        </label>
    </div>

    <hr>
    <h1>表格</h1>

    <table class="ui-table">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第1行项目1</td>
                <td>第1行项目2</td>
                <td>第1行项目3</td>
            </tr>
            <tr>
                <td>第2行项目1</td>
                <td>第3行项目2</td>
                <td>第4行项目3</td>
            </tr>
        </tbody>
    </table>

    <p></p>


    <div class="table-x table-checkbox">
        <!-- 列表的头部，内头 -->
        <div class="table-header">
            <h2 class="table-title">用户评论</h2>
        </div>
        <table class="ui-table">
            <tbody>
                <tr>
                    <th><input type="checkbox" id="chkAll2"><label class="ui-checkbox" for="chkAll2"></label></th>
                    <th>粉丝</th>
                    <th width="30%">评论内容</th>
                    <th>评论时间</th>
                    <th>所有评论</th>
                </tr>
                <tr>
                    <td><input type="checkbox" id="chkTable3"><label class="ui-checkbox" for="chkTable3"></label></td>
                    <td>
                        <div class="ell">烦人的小妖精娜娜酱</div>
                    </td>
                    <td>
                        <div class="ell"><span class="gray">[已置顶]</span>不错，赞一个以后天天关注。</div>
                    </td>
                    <td>2015-06-26 12:34</td>
                    <td>通过</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="chkTable4"><label class="ui-checkbox" for="chkTable4"></label></td>
                    <td>
                        <div class="ell">司徒中</div>
                    </td>
                    <td>
                        <div class="ell">对于估值近期的大幅下跌，证监会新闻发言人张晓军26日表示：这是市场前期过快上涨的自然调整，是市场自身运行规律的结果，有流动性波动，投资去杠杆等因素叠加的原因。</div>
                    </td>
                    <td>2015-06-26 18:11</td>
                    <td>不通过</td>
                </tr>
            </tbody>
        </table>
        <!-- 底部分页 -->
        <div class="table-page-x">
            <div class="table-page-data">
                共<output class="table-page-total">2</output>名成员, 每页显示<a href="javascript:" class="table-page-per dropPagePer">15</a>
            </div>
            <div class="table-page defaultPage"></div>
        </div>
    </div>


    <hr>
    <h1>单复选框</h1>

    <input type="radio" id="radio1" name="radio">
    <label for="radio1" class="ui-radio"></label>
    <label for="radio1">单选项1</label>
    <!-- .ui-radio元素是看到的单选框效果，需要紧跟在原生的radio控件的后面 -->

    <input type="radio" id="radio2" name="radio">
    <label for="radio2" class="ui-radio"></label>
    <label for="radio2">单选项2</label>

    <input type="radio" id="radio4" name="radioDisabled" disabled>
    <label for="radio4" class="ui-radio"></label><label for="radio4">禁用效果</label>

    <input type="radio" id="radio5" name="radioDisabled" disabled checked>
    <label for="radio5" class="ui-radio"></label><label for="radio5">被选中的禁用</label>

    <p></p>

    <input type="checkbox" id="checkbox1" name="checkbox">
    <label for="checkbox1" class="ui-checkbox"></label><label for="checkbox1">复选项1</label>
    <!-- .ui-checkbox元素就是肉眼所见的模拟复选框，需要紧跟在原生的 checkbox 控件的后面 -->

    <input type="checkbox" id="checkbox4" name="checkbox" disabled><label for="checkbox4" class="ui-checkbox"></label><label for="checkbox4">复选项4</label>
    <input type="checkbox" id="checkbox5" name="checkbox" disabled checked>
    <label for="checkbox5" class="ui-checkbox"></label><label for="checkbox5">复选项5</label>

    <p>
        <input type="checkbox" id="checkbox6" ui-visible><label for="checkbox6" class="mr30 f14">ui-visible 还原为原生态</label>

        <input type="radio" id="radio6" ui-visible><label for="radio6" class="ui-radio"></label><label for="radio6">还原为原生态</label>
    </p>


    <hr>
    <h1>基于复选框的开关效果</h1>

    <p>
        <input type="checkbox" id="switch"><label class="ui-switch" for="switch"></label>
        <input type="checkbox" id="switch2" disabled><label class="ui-switch" for="switch2"></label>
        <input type="checkbox" id="switch3" checked disabled><label class="ui-switch" for="switch3"></label>
    </p>


    <hr>
    <h1>进度条效果</h1>

    <p>
        无属性设置: <progress class="ui-progress"></progress> <br>
        设置value: <progress class="ui-progress" value="0.5"></progress>


    </p>


    <hr>
    <h1>Select下拉框</h1>

    <select id="select">
        <option value="1" label="选项a">选项1</option>
        <option value="2" label="选项b">暗黑破坏神</option>
    </select>

    <select multiple>
        <option>选项1</option>
        <option selected>选项2</option>
        <option selected>选项3</option>
        <option>选项4</option>
        <option disabled>选项5</option>
        <option>选项6</option>
    </select>



    <hr>
    <h1>tips提示</h1>

    <p>
        <i class="ui-tips" title="删除">aaa</i>

        <i class="icon_del ui-tips" title="删除">黑色提示</i>
        <i class="icon_del ui-tips" tabindex="0" role="tooltip" data-title="删除" aria-label="删除">asdfasdf</i>
    </p>

    <p>
        <input type="search" class="ui-input valided">
        <a href="javascript:" id="btnSearch" class="ui-button ui-button-primary" role="button">搜索</a>
    </p>

    <hr>
    <h1>轻提示</h1>

    <p>
        <button id="lightTipSucc" class="ui-button" data-type="success">成功轻提示</button>
        <button id="lightTipError" class="ui-button" data-type="danger">失败轻提示</button>
        <button id="lightTipNormal" class="ui-button">不带感情色彩的信息提示</button>
    </p>


    <hr>
    <h1>下拉等</h1>

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    




    <hr>
    <h1>Tab 选项卡切换</h1>

    <div id="tabView" class="ui-tab-tabs">
        <a href="javascript:" class="ui-tab-tab checked" data-rel="tabTarget1">选项卡1</a>
        <a href="javascript:" class="ui-tab-tab" data-rel="tabTarget2">选项卡2</a>
    </div>
    <div class="ui-tab-contents">
        <article id="tabTarget1" class="ui-tab-content checked">选项卡1对应面板内容</article>
        <article id="tabTarget2" class="ui-tab-content">选项卡2对应面板内容</article>
    </div>


    <div style="height: 500px">
        sdfasdfasdf
    </div>



</main>

<?php include 'layouts/_js.view.php'; ?>
<script>
    $('select').selectMatch();

    $('#testLoading a').click(function() {
        $(this).loading();
        setTimeout($.proxy(function() {
            $(this).unloading();
        }, this), 5000 * Math.random());
    });

    document.querySelector('#lightTipSucc').addEventListener('click', function() {
        new LightTip().success('修改成功');
    });
    document.querySelector('#lightTipError').addEventListener('click', function() {
        new LightTip().error('修改失败');
    });

    document.querySelector('#lightTipNormal').addEventListener('click', function() {
        new LightTip('今天的风儿甚至喧嚣');
    });


    $('#btnSearch').click(function() {
        var elSearch = $('input[type=search]');
        if (elSearch.val() == '') {
            elSearch.errorTip('尚未输入搜索内容');
        }
    });


    // 基本下拉效果示意
    var elTabindex1 = $('#testTabindex1'),
        elTabindex2 = $('#testTabindex2');
    var dropHover = $('#dropHover'),
        dropClick = $('#dropClick');
    new Drop(dropHover, elTabindex1, {
        eventType: 'hover',
        onShow: function(trigger, target) {
            target.css('border', '2px solid #333');
        }
    });
    new Drop(dropClick, elTabindex2, {
        eventType: 'click'
    });


    $('#tabView > a').tab();
</script>
<?php include 'layouts/_footer.view.php'; ?>